<template>
    <div class="helpage">
        <topnav pageindex="3"></topnav>
        <div class="wraper">
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-menu theme="dark" mode="horizontal" :default-active="helpindex" @select="changeindex">
                        <el-menu-item index="1"><span>挖矿方法</span></el-menu-item>
                        <el-menu-item index="2"><span>挖矿说明</span></el-menu-item>
                    </el-menu>
                    <div class="mainwrap">
                        <div class="dlwrap" v-show="showindex=='1'">
                            <h1>挖矿客户端</h1>
                            <div class="dldes">
                                <h3>使用客户端挖矿，更简单！</h3>
                            </div>
                            <div class="dlmain">
                                <div class="maindes">
                                    <div>
                                        <p>1.支持多币种的挖矿，例如:ETH，ETC，EXP，ZEC，SC，BTX，DCR。</p>
                                        <p>2.支持国内多个矿池，例如：GPU矿池，鱼池，星火等。</p>
                                        <p>3.支持自定义矿池。</p>
                                        <p>4.自动判断显卡类型，采用效率最高的挖矿内核。</p>
                                        <p>5.真正实现了反抽水。</p>
                                    </div>
                                    <div class="btnwrap">
                                        <a class="dlbtn" href="https://pan.baidu.com/s/1VVKSv5DSw0hGnwaXkb5jAw" target="_blank">下载客户端</a>
                                    </div>
                                </div>
                                <div class="dlpic"></div>
                            </div>
                            <div>
                                <h3>客户端使用方法</h3>
                                <div class="dlcontent">
                                    <div class="eachstep">
                                        <p>1.快速入门</p>
                                        <div class="stepic steponepic"></div>
                                    </div>
                                    <div class="eachstep">
                                        <p>2.设置双挖</p>
                                        <div class="stepic steptwopic"></div>
                                    </div>
                                    <div class="eachstep">
                                        <p>3.自定义矿池</p>
                                        <div class="stepic stepthreepic"></div>
                                    </div>
                                    <div class="eachstep">
                                        <p>4.系统设置</p>
                                        <div class="stepic stepfourpic"></div>
                                    </div>
                                    <div class="eachstep">
                                        <p>5.正常运行</p>
                                        <div class="stepic stepfivepic"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="deswrap" v-show="showindex=='2'">
                            <h1>挖矿说明</h1>
                            <div class="des">
                                <p>矿池采用PPLNS+PPS模式（ZEC,SC除外），根据矿工提供的算力提供相对稳定的收益</p>
                                <p>挖矿手续费:&nbsp;ETH手续费为2%;&nbsp;&nbsp;ETC手续费为4%;&nbsp;&nbsp;EXP手续费为4%;&nbsp;&nbsp;ZEC手续费为1%;&nbsp;&nbsp;SC手续费为3%;</p>
                                <p>PPLNS模式，统一收1%手续费。</p>
                                <p>ETH支付说明:&nbsp;余额达到0.1ETH进行支付。</p>
                                <p>ETC支付说明:&nbsp;余额达到0.1ETC进行支付。</p>
                                <p>EXP支付说明:&nbsp;余额达到0.5EXP进行支付。</p>
                                <p>ZEC支付说明:&nbsp;余额达到0.1ZEC进行支付。</p>
                                <p>SC支付说明:&nbsp;余额达到500SC进行支付。</p>
                                <p>ETH、ETC、EXP、SC:每天8点~12点进行支付，矿池承担支付所需的手续费。</p>
                                <p>ZEC:每挖到一个块并在块成熟后进行支付。</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <footemp></footemp>
    </div>
</template>
<script>
    import topnav from "@/components/common/topnav.vue";
    import footemp from "@/components/common/footer.vue";
    export default {
        name: "homepage",
        data() {
            return {
                helpindex: "1",
                showindex: "1"
            }
        },
        methods: {
            changeindex: function(key, keyPath) {
                this.showindex = key;
            }
        },
        components: {
            topnav,
            footemp
        }
    }
</script>
<style>
    .helpage .banner{
        width: 100%;
        height: 100%;
        background-image: url("../assets/imgs/bgpic.jpg");
        background-attachment: fixed;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        text-align: center;
    }
    .helpage .banner:before {
        content: '';
        background: rgba(75, 75, 93, 0.9);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .helpage .deswrap {
        color: #555555;
        padding: 80px;
        background-color: #ffffff;
    }
    .helpage .deswrap h1 {
        margin-bottom: 20px;
    }
    .helpage .dlwrap {
        color: #000000;
        padding: 80px 0px;
    }
    .helpage .dlwrap h3 {
        margin: 40px 0px;
    }
    .hpage .dlwrap .dlmain {
        width: 90%;
        margin: 0px auto;
    }
    .helpage .dlwrap .dlmain .maindes {
        display: inline-block;
        text-align: left;
    }
    .helpage .dlwrap .dlmain .maindes p,.hpage .deswrap p {
        margin: 10px 0px;
    }
    .helpage .dlpic {
        display: inline-block;
        vertical-align: top;
        width: 300px;
        height: 300px;
        background-image: url(../assets/imgs/dlpic.png);
        background-size: 100% 100%;
        margin-left: 20px;
    }
    .helpage .dlwrap .dlbtn {
        display: inline-block;
        padding: 10px 15px;
        color: #ffffff;
        background-color: #20a0ff;
        border: 1px solid #20a0ff;
        border-radius: 4px;
        text-decoration: none;
        margin-top: 40px;
    }
    .helpage .datawrap {
        background-color: #ffffff;
        padding: 80px;
    }
    .helpage .datawrap th {
        text-align: center;
    }
    .helpage .datawrap h1 {
        margin-bottom: 20px;
    }
    .helpage .wraper {
        margin: 40px 0px;
    }
    .helpage .mainwrap {
        background-color: #ffffff;
    }
    .helpage .dlcontent .stepic {
        width: 691px;
        height: 519px;
        margin: 10px auto 0px auto;
        background-size: 100% 100%;
    }
    .helpage .dlcontent .eachstep {
        margin-top: 40px;
    }
    .helpage .dlcontent .steponepic {
        background-image: url(../assets/imgs/sonepic.png);
    }
    .helpage .dlcontent .steptwopic {
        background-image: url(../assets/imgs/stwopic.png);
    }
    .helpage .dlcontent .stepthreepic {
        background-image: url(../assets/imgs/sthreepic.png);
    }
    .helpage .dlcontent .stepfourpic {
        background-image: url(../assets/imgs/sfourpic.png);
    }
    .helpage .dlcontent .stepfivepic {
        background-image: url(../assets/imgs/sfivepic.png);
    }
</style>